<template>
  <div class="head">
    <div class="top">
      <div class="shopSearch">
        <em class="iconfont" @click="vfun_sree">&#xe61b;</em>
        <input type="text" v-model="saleGoodsQb.fullTextFilterStr" placeholder="搜索" @input="vfun_sree">
      </div>
    </div>

    <div class="good-section">
    	<div class="left-nav">
    		<ul>
    			<li v-for="(item,index) in GoodsCategorySet.list" @click="vfun_categorys(index,GoodsCategorySet.list)" :class="{activecate:index===vue_list_index}">{{item.categoryName}}</li>
    		</ul>
    	</div>
    	<div class="right">
    		<div class="gao-banner">
    			<img :src="advListPicurl" />
    		</div>
    		<div class="isnull" v-if="SaleGoodsSet.list==''">
    			<img src="../../assets/img/landing.gif" v-if="vue_null" />
    			<em class="iconfont" style="font-size: 100px;color: #ccc;" v-else>&#xe600;</em>
    		</div>
    		<div class="classList">

    			<div class="guanggao">
	    			<div v-for="(item,index) in SaleGoodsSet.list" style="width: 33.33%;" @click="vfun_go(index,SaleGoodsSet.list)">
	    				<img :src="item.goodsBigPic" v-if="SaleGoodsSet.list[index].goodsBigPic!=''" />
		   				<img src="../../../static/noImg.png" v-else />
	    				<h2>{{item.goodsName}}</h2>
	    			</div>
	    		</div>
    		</div>
    	</div>
    </div>
    <vue-footer></vue-footer>
  </div>
</template>

<script>
	import vueFooter from '../../components/footer/footer'
export default {
	components:{vueFooter},
  name: 'hello',
  data () {
    return {
    	advListPicurl:'',
    	GoodsCategorySet:{
    		"list":[],
    	},
    	SaleGoodsSet:{
    		"list":[],
    	},
    	vue_null:true,
    	saleGoodsQb:{
    		"fullTextFilterStr":"",
    		"categoryCode":"",
    	},
    	vue_list_index:0
    }
  },
  methods:{
  	vfun_sree(){
  		this.queryByPage();
  	},
  	vfun_go(index,obj){
  		localStorage.setItem("goodsCode",obj[index].goodsCode);
  		this.$router.push({path:"/goodsDetails"})
  	},
  	vfun_categorys(index,obj){
  		this.vue_list_index=index;
  		this.saleGoodsQb.categoryCode=obj[index].categoryCode;
  		this.queryByPage();
  	},
  	categorys(){
  		this.axios({
			method: 'POST',
			url: "/v3/goods/categorys/listAll",
			data:{
				"categoryParentCode":"-1"
			}
			}).then((res) => {
				this.GoodsCategorySet.list=res.data.list;
			}).catch((err)=>{

	  	});
  	},
  	queryByPage(){
  		this.axios({
			method: 'POST',
			url: "/v3/sale/goodss/list",
			data:{
				"categoryCode":this.saleGoodsQb.categoryCode,
				"fullTextFilterStr":this.saleGoodsQb.fullTextFilterStr,
			}
			}).then((res) => {
				this.SaleGoodsSet.list=res.data.list;
				if(this.SaleGoodsSet.list==''){
					this.vue_null=false;
				}
			}).catch((err)=>{
				this.vue_null=false;
	  	});
  	},

  },
  activated(){
  	this.categorys();
  	this.queryByPage();
  	document.querySelector('#vue_id_title').innerHTML="分类";
  	this.axios({
					method: 'GET',
					url: "/v3/portal/pages/appIndex",
					data:{
					}
					}).then((res) => {
						this.advListPicurl=res.data.portalAdvListDataList[0].advListPicurl;

					}).catch((err)=>{
		  	});
  },
  mounted(){
  	this.categorys();
  	this.queryByPage();
  	this.axios({
					method: 'GET',
					url: "/v3/portal/pages/appIndex",
					data:{
					}
					}).then((res) => {s
						this.advListPicurl=res.data.portalAdvListDataList[0].advListPicurl;

					}).catch((err)=>{
		  	});
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}
a {
}

.top{
  border-bottom: 1px  #E7E7E9 solid;
}

.shopSearch input{
  width: 90%;
  border-radius: .2rem;
  border: 0;
  height: .87rem;
}

.shopSearch{
  border: 1px #E7E7E9 solid;
  text-align: center;
  width: 90%;
  background: #fff;
  margin: .3rem auto .3rem;
  border-radius: .2rem;
  /*border-bottom: 1px solid #E7E7E9;*/
}


.sree{
	width: 100%;
	height: 1.2rem;
	/*background: url(../../assets/img/bg.jpg);*/
	background-size:auto 100%;
	z-index: 100;

	position: fixed;
	top: 0;
	width: 100%;
	display: -webkit-box;
}
.sree .sreinput{
	line-height: 0.6rem;
	background: #fff;
	-webkit-box-flex: 1;
	border-radius:100px;
	height: 0.6rem;
	display: -webkit-box;
}
.sreinput input{
	display: block;
	border: 0;
	height: 0.8rem;
	margin-top: 1px;
	box-sizing: border-box;
	-webkit-box-flex: 1;
	border-radius:5px;
	font-size: 12px;
	text-indent:10px;
	border: 1px solid #ccc;
	background:transparent;
}
.sree div{
	margin-top: 0.2rem;
}
.sree div em{
	display: block;
	color: #666;
	font-size: 25px;
	margin-left: 3%;
}
.logo {
	padding:0 2%;
	/*font-size: 16px;*/
	line-height: 0.88rem;
}
.land{
	width: 10%;
	text-align: center;
	font-size: 14px;
	line-height: 0.8rem;
}
.good-section{
	/*margin-top: 1.2rem;*/
	display: -webkit-box;
	padding-bottom: 1.6rem;
}
.left-nav{

	/*-webkit-box-flex: 1;*/
	/*border-right:1px solid #ccc ;*/
}
.left-nav>ul{
	background:#F0F0F5;

}
.left-nav li{
	position:relative;
	font-size: 13px;
	text-align: center;
	padding: 0.3rem 0;
	border-bottom: 1px solid #E7E7E9;
	width: 2rem;
}
.right{
	-webkit-box-flex: 1;
}
.guanggao{
	/*display: -webkit-box;*/
	width: 100%;
}
.guanggao div{
	float: left;
	/*display: block;*/
	/*-webkit-box-flex: 1;*/
	box-sizing: border-box;
	padding: 0.2rem;
}
.guanggao div img{
	width: 100%;
	height: 2.2rem;
}
.gao-banner{
	box-sizing: border-box;
	padding: 0.2rem;
}
.gao-banner img{
	width: 100%;
	height: 3rem;
}
.classList{
	margin-bottom: 0.2rem;
}
.classList h2{
	font-size: 13px;
	font-weight:bold ;
	color: #666;
	margin-left: 0.2rem;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;

}
.class-text{
	font-size: 12px;
	margin-left: 0.2rem;
}
.isnull{
	width: 100%;
	text-align: center;
	margin-top: 20%;
}
.isnull img{
	display: block;
	margin: 0 auto;
	width: 1.2rem;
}
.activecate{
	background:#fff;
	color:#D50B0A;
}
.activecate:before{
	content:'';
	position:absolute;
	top:0;
	right:-3px;
	width:5px;
	height:100%;
	background:#fff;
}
</style>
